<!-- eslint-disable vue/multi-word-component-names -->
// eslint-disable-next-line vue/multi-word-component-names
<template>
  <div class="loginpage" :style="loginBgStyle">
    <div class="login-container">
      <el-form
        :model="formData"
        ref="formRef"
        :rules="rules"
        class="demo-ruleForm"
        size="large"
      >
        <el-avatar :size="90" :src="logoUrl" />
        <h3>超维娱网</h3>
        <el-form-item prop="mobile">
          <el-input
            v-model="formData.mobile"
            placeholder="请输入账号"
            :disabled="loading"
          >
            <template #prefix>
              <el-icon :size="22"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
            :disabled="loading"
          >
            <template #prefix>
              <el-icon :size="22"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="el-button"
            type="primary"
            @click="submitForm"
            :loading="loading"
            :disabled="loading"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-checkbox
        v-model="checked"
        style="margin-left: 5px"
        @change="recordPassword"
        :disabled="isDisabled || loading"
      >
        记住密码
      </el-checkbox>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { validateMobile } from '@/utils/formCheck';
import { Login } from '@/api/login';
import { useRouter } from 'vue-router';
import useLogin from '@/stores/login';
import { getImageUrl } from '@/utils/imageUrl';

// 获取图片URL
const logoUrl = getImageUrl('chaowei-login.png');
const loginBgStyle = computed(() => ({
  background: `url(${getImageUrl('loginbg.png')}) no-repeat center center`,
  backgroundSize: 'cover',
}));

// 添加loading状态
const loading = ref(false);

const router = useRouter();
const LoginStore = useLogin();
const formData = ref({
  mobile: '',
  password: '',
});
const isDisabled = computed(() => {
  return !formData.value.mobile || !formData.value.password;
});
const checked = ref(false);
const rules = {
  mobile: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { validator: validateMobile, trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
  ],
};
const formRef = ref(null);
// 登录
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        const res = await Login(formData.value);
        if (res.data.code === 200) {
          const token = res.data.data.token;
          LoginStore.token = token;
          recordPassword();
          ElMessage({
            message: '登录成功',
            type: 'success',
          });
          router.push('/home');
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
          });
        }
      } catch (error) {
        ElMessage({
          message: '登录失败，请稍后重试',
          type: 'error',
        });
      } finally {
        loading.value = false;
      }
    }
  });
};
// 根据状态将账号密码存储到本地
const recordPassword = () => {
  if (checked.value) {
    // 存储账号密码到本地
    localStorage.setItem('mobile', formData.value.mobile);
    localStorage.setItem('password', formData.value.password);
    localStorage.setItem('checked', 'true');
  } else {
    // 清除存储的用户名和密码
    localStorage.removeItem('mobile');
    localStorage.removeItem('password');
    localStorage.removeItem('checked');
  }
};
// 刚进页面时判断记住密码状态
const Rememberchecked = () => {
  const ischecked = localStorage.getItem('checked');
  if (ischecked === 'true') {
    formData.value.mobile = localStorage.getItem('mobile');
    formData.value.password = localStorage.getItem('password');
    checked.value = true;
  }
};
Rememberchecked();
</script>

<style lang="scss" scoped>
/* 添加全局样式重置 */
:global(html),
:global(body) {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loginpage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10%;

  .login-container {
    width: 400px;
    padding: 50px 35px;

    background: linear-gradient(135deg, #fbf9ff 0%, #ebf5ff 100%);
    box-shadow: 0px 5px 15px 0px rgba(6, 21, 38, 0.1);
    border-radius: 12px;

    .demo-ruleForm {
      display: flex;
      align-items: center;
      flex-direction: column;

      h3 {
        margin: 20px 0 40px;
        font-weight: 400;
        font-size: 26px;
        color: #303133;
        text-align: center;
      }

      .el-form-item {
        width: 100%;
        margin-bottom: 25px;

        .el-input {
          height: 50px;

          :deep(.el-input__wrapper) {
            border: 1px solid #409eff;
            border-radius: 8px;
          }
        }

        .el-button {
          width: 100%;
          height: 50px;
          margin-top: 14px;
          background: #507afd;
          border-radius: 8px;
          color: #fff;

          &:hover:not(:disabled) {
            opacity: 0.9;
          }
        }
      }
    }
  }
}
</style>
